import { Card, CardBody, CardHeader } from "@heroui/react";

import DefaultLayout from "@/layouts/default";

export default function ConsolePage() {
  // Mock data for statistics
  const statsData = [
    { title: "总用户数", value: "12,345", change: "+12%", description: "较上月" },
    { title: "总订单数", value: "8,765", change: "+8%", description: "较上月" },
    { title: "总收入", value: "¥1,234,567", change: "+15%", description: "较上月" },
    { title: "活跃用户", value: "3,456", change: "+5%", description: "较上月" },
  ];

  // Mock data for recent activities
  const recentActivities = [
    { id: 1, user: "张三", action: "创建新订单", time: "2分钟前" },
    { id: 2, user: "李四", action: "完成支付", time: "15分钟前" },
    { id: 3, user: "王五", action: "提交反馈", time: "1小时前" },
    { id: 4, user: "赵六", action: "更新资料", time: "3小时前" },
    { id: 5, user: "孙七", action: "登录系统", time: "5小时前" },
  ];

  // Mock data for chart
  const chartData = [
    { month: "1月", value: 65 },
    { month: "2月", value: 78 },
    { month: "3月", value: 90 },
    { month: "4月", value: 81 },
    { month: "5月", value: 95 },
    { month: "6月", value: 88 },
  ];

  // Mock data for team members
  const teamMembers = [
    { id: 1, name: "张三", role: "产品经理", status: "在线" },
    { id: 2, name: "李四", role: "前端开发", status: "忙碌" },
    { id: 3, name: "王五", role: "后端开发", status: "在线" },
    { id: 4, name: "赵六", role: "UI设计师", status: "离线" },
  ];

  return (
    <DefaultLayout>
      <div className="flex flex-col gap-6 py-6">
        {/* Page Title */}
        <div className="flex flex-col gap-2">
          <h1 className="text-2xl font-bold">控制台</h1>
          <p className="text-default-500">欢迎回来，Admin</p>
        </div>

        {/* Statistics Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {statsData.map((stat, index) => (
            <Card key={index} className="border-none shadow-sm">
              <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
                <p className="text-tiny uppercase font-bold text-default-500">{stat.title}</p>
                <h4 className="font-bold text-large">{stat.value}</h4>
              </CardHeader>
              <CardBody className="overflow-visible py-2">
                <div className="flex items-center gap-1">
                  <span className="text-success text-tiny">{stat.change}</span>
                  <span className="text-default-500 text-tiny">{stat.description}</span>
                </div>
              </CardBody>
            </Card>
          ))}
        </div>

        {/* Charts and Data Sections */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Chart */}
          <div className="lg:col-span-2">
            <Card className="shadow-sm">
              <CardHeader className="flex gap-3">
                <div className="flex flex-col">
                  <p className="text-md">收入统计</p>
                  <p className="text-small text-default-500">最近6个月收入情况</p>
                </div>
              </CardHeader>
              <CardBody>
                {/* Simple bar chart representation */}
                <div className="flex items-end justify-between h-64 gap-2">
                  {chartData.map((item, index) => (
                    <div key={index} className="flex flex-col items-center flex-1">
                      <div className="text-tiny text-default-500 mb-2">{item.month}</div>
                      <div 
                        className="w-full bg-primary rounded-t-lg transition-all duration-500 ease-in-out hover:opacity-80"
                        style={{ height: `${item.value}%` }}
                      ></div>
                      <div className="text-tiny mt-2">{item.value}</div>
                    </div>
                  ))}
                </div>
              </CardBody>
            </Card>
          </div>

          {/* Team Members */}
          <div>
            <Card className="shadow-sm">
              <CardHeader className="flex gap-3">
                <div className="flex flex-col">
                  <p className="text-md">团队成员</p>
                  <p className="text-small text-default-500">当前在线状态</p>
                </div>
              </CardHeader>
              <CardBody>
                <div className="space-y-4">
                  {teamMembers.map((member) => (
                    <div key={member.id} className="flex items-center justify-between py-2 border-b border-default-200 last:border-0">
                      <div className="flex flex-col">
                        <p className="text-md font-medium">{member.name}</p>
                        <p className="text-small text-default-500">{member.role}</p>
                      </div>
                      <span className={`px-2 py-1 rounded text-tiny font-medium ${
                        member.status === "在线" 
                          ? "bg-success/20 text-success" 
                          : member.status === "忙碌" 
                            ? "bg-warning/20 text-warning" 
                            : "bg-default/20 text-default"
                      }`}>
                        {member.status}
                      </span>
                    </div>
                  ))}
                </div>
              </CardBody>
            </Card>
          </div>
        </div>

        {/* Recent Activities and Quick Actions */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Recent Activities */}
          <Card className="shadow-sm">
            <CardHeader>
              <p className="text-md">最近活动</p>
            </CardHeader>
            <CardBody>
              <div className="space-y-4">
                {recentActivities.map((activity) => (
                  <div key={activity.id} className="flex items-center justify-between py-2 border-b border-default-200 last:border-0">
                    <div className="flex flex-col">
                      <p className="text-md font-medium">{activity.user}</p>
                      <p className="text-small text-default-500">{activity.action}</p>
                    </div>
                    <div className="text-small text-default-500">{activity.time}</div>
                  </div>
                ))}
              </div>
            </CardBody>
          </Card>

          {/* Quick Actions */}
          <Card className="shadow-sm">
            <CardHeader>
              <p className="text-md">快捷操作</p>
            </CardHeader>
            <CardBody>
              <div className="grid grid-cols-2 gap-4">
                <div className="flex flex-col items-center justify-center p-4 bg-default-100 rounded-lg hover:bg-default-200 cursor-pointer transition-colors">
                  <div className="bg-primary/20 p-3 rounded-lg mb-2">
                    <div className="bg-primary w-6 h-6 rounded-full"></div>
                  </div>
                  <p className="text-sm font-medium">添加用户</p>
                </div>
                <div className="flex flex-col items-center justify-center p-4 bg-default-100 rounded-lg hover:bg-default-200 cursor-pointer transition-colors">
                  <div className="bg-success/20 p-3 rounded-lg mb-2">
                    <div className="bg-success w-6 h-6 rounded-full"></div>
                  </div>
                  <p className="text-sm font-medium">生成报告</p>
                </div>
                <div className="flex flex-col items-center justify-center p-4 bg-default-100 rounded-lg hover:bg-default-200 cursor-pointer transition-colors">
                  <div className="bg-warning/20 p-3 rounded-lg mb-2">
                    <div className="bg-warning w-6 h-6 rounded-full"></div>
                  </div>
                  <p className="text-sm font-medium">系统设置</p>
                </div>
                <div className="flex flex-col items-center justify-center p-4 bg-default-100 rounded-lg hover:bg-default-200 cursor-pointer transition-colors">
                  <div className="bg-danger/20 p-3 rounded-lg mb-2">
                    <div className="bg-danger w-6 h-6 rounded-full"></div>
                  </div>
                  <p className="text-sm font-medium">数据备份</p>
                </div>
              </div>
            </CardBody>
          </Card>
        </div>
      </div>
    </DefaultLayout>
  );
}